<template>
  <DataTable
    v-model:page="page"
    v-model:items-per-page="itemsPerPage"
    :headers
    :items="connectors"
    :total-count="connectorCount"
    :loading
    :items-per-page-options="[10, 20, 50, 100]"
    data-test="connector-list"
  >
    <template #rows>
      <tr
        v-for="(item, i) in connectors"
        :key="i"
      >
        <td class="text-center">
          <div
            data-test="status-connector"
            :class="(item.status.state === 'connected' ? 'enabled' : 'disabled') + ' text-center'"
          />
        </td>
        <td class="text-center">
          <div
            class="d-flex justify-center"
            data-test="switch-enable"
          >
            <v-switch
              v-model="item.enable"
              inset
              hide-details
              :color="item.enable ? 'primary' : 'grey-darken-2'"
              @click="toggleConnectorState(item)"
            />
          </div>
        </td>
        <td class="text-center">
          <CopyWarning :copied-item="'Connector host'">
            <template #default="{ copyText }">
              <v-chip data-test="ip-chip">
                <v-tooltip location="bottom">
                  <template #activator="{ props }">
                    <span
                      v-bind="props"
                      class="hover-text"
                      @click="copyText(`${item.address}:${item.port}`)"
                      @keypress="copyText(`${item.address}:${item.port}`)"
                    >
                      {{ `${item.address}:${item.port}` }}
                    </span>
                  </template>
                  <span>Copy IP</span>
                </v-tooltip>
              </v-chip>
            </template>
          </CopyWarning>
        </td>
        <td class="text-center">
          <v-icon
            data-test="secure-icon"
            class="mr-1"
            size="26"
            :color="item.secure ? 'primary' : 'grey-darken-2'"
            :icon="item.secure ? 'mdi-lock-check' : 'mdi-lock-open-alert'"
          />
        </td>
        <td
          class="text-center"
          data-test="menu-key-component"
        >
          <v-menu
            location="bottom"
            scrim
            eager
          >
            <template #activator="{ props }">
              <v-btn
                v-bind="props"
                variant="plain"
                class="border rounded bg-v-theme-background"
                density="comfortable"
                size="default"
                icon="mdi-format-list-bulleted"
                data-test="connector-list-actions"
              />
            </template>
            <v-list
              class="bg-v-theme-surface"
              lines="two"
              density="compact"
            >
              <v-list-item @click="redirectToDetails(item.uid)">
                <div class="d-flex align-center">
                  <div class="mr-2">
                    <v-icon> mdi-information </v-icon>
                  </div>

                  <v-list-item-title data-test="mdi-information-list-item">
                    Details
                  </v-list-item-title>
                </div>
              </v-list-item>
              <v-tooltip
                location="bottom"
                class="text-center"
                :disabled="canEditConnector"
              >
                <template #activator="{ props }">
                  <div v-bind="props">
                    <ConnectorEdit
                      :ip-address="item.address"
                      :secure="item.secure"
                      :port-address="item.port"
                      :uid="item.uid"
                      :has-authorization="canEditConnector"
                      @update="getConnectors"
                    />
                  </div>
                </template>
                <span> You don't have this kind of authorization. </span>
              </v-tooltip>

              <v-tooltip
                location="bottom"
                class="text-center"
                :disabled="canRemoveConnector"
              >
                <template #activator="{ props }">
                  <div v-bind="props">
                    <ConnectorDelete
                      :uid="item.uid"
                      :has-authorization="canRemoveConnector"
                      @update="getConnectors"
                    />
                  </div>
                </template>
                <span data-test="no-connector-validate"> You don't have this kind of authorization. </span>
              </v-tooltip>
            </v-list>
          </v-menu>
        </td>
      </tr>
    </template>
  </DataTable>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { storeToRefs } from "pinia";
import { envVariables } from "@/envVariables";
import DataTable from "../Tables/DataTable.vue";
import ConnectorDelete from "../Connector/ConnectorDelete.vue";
import ConnectorEdit from "../Connector/ConnectorEdit.vue";
import CopyWarning from "@/components/User/CopyWarning.vue";
import hasPermission from "@/utils/permission";
import handleError from "@/utils/handleError";
import { router } from "@/router";
import useSnackbar from "@/helpers/snackbar";
import useConnectorStore from "@/store/modules/connectors";
import { IConnector } from "@/interfaces/IConnector";

const headers = [
  {
    text: "Status",
    value: "status",
  },
  {
    text: "Enable",
    value: "enable",
  },
  {
    text: "Host",
    value: "host",
  },
  {
    text: "Secure",
    value: "secure",
  },
  {
    text: "Actions",
    value: "actions",
  },
];
const snackbar = useSnackbar();
const loading = ref(false);
const itemsPerPage = ref(10);
const page = ref(1);
const connectorStore = useConnectorStore();
const { connectors, connectorCount } = storeToRefs(connectorStore);

const canEditConnector = hasPermission("connector:edit");

const canRemoveConnector = hasPermission("connector:remove");

const getConnectors = async () => {
  try {
    loading.value = true;
    await connectorStore.fetchConnectorList({
      page: page.value,
      perPage: itemsPerPage.value,
    });
  } catch (error: unknown) {
    snackbar.showError("An error occurred while loading connectors");
    handleError(error);
  }

  loading.value = false;
};

onMounted(async () => {
  if (envVariables.isCommunity) {
    return;
  }
  await getConnectors();
});

watch([page, itemsPerPage], async () => { await getConnectors(); });

const redirectToDetails = async (uid: string) => {
  await router.push({ name: "ConnectorDetails", params: { id: uid } });
};

const toggleConnectorState = async (item: IConnector) => {
  try {
    const payload = {
      ...item,
      enable: !item.enable,
    };
    await connectorStore.updateConnector(payload);
    snackbar.showSuccess("Connector updated successfully.");
    await getConnectors();
  } catch (error) {
    snackbar.showError("An error occurred while updating the connector.");
    handleError(error);
  }
};

defineExpose({ getConnectors, itemsPerPage });
</script>

<style scoped>
.enabled {
  height: 20px;
  width: 20px;
  background-color: #4CAF50;
  filter: blur(2px);
  border-radius: 50%;
  display: inline-block;
  -webkit-box-shadow: 0px 0px 10px 1px rgba(76,175,79,0.75);
  -moz-box-shadow: 0px 0px 10px 1px rgba(76,175,79,0.75);
  box-shadow: 0px 0px 10px 1px rgba(76,175,79,0.75);
}

.disabled {
  height: 20px;
  width: 20px;
  background-color: #F44336;
  filter: blur(2px);
  border-radius: 50%;
  display: inline-block;
  -webkit-box-shadow: 0px 0px 10px 1px rgba(244, 67, 54,0.75);
  -moz-box-shadow: 0px 0px 10px 1px rgba(244, 67, 54,0.75);
  box-shadow: 0px 0px 10px 1px rgba(244, 67, 54,0.75);
}
</style>
